<template>
  <div class="Live-view">
    <!-- 演唱会添加表单 -->
    <el-dialog title="添加演唱会" :visible.sync="dialogVisible" @close="closeDialog">
      <el-form :model="form" ref="form" label-width="120px">
        <el-form-item label="演唱会ID">
          <!-- ID不可更改 -->
          <el-input v-model="form.id" type="number" :disabled="isEditing"></el-input>
        </el-form-item>
        <el-form-item label="演唱会名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="歌手">
          <el-input v-model="form.Singer"></el-input>
        </el-form-item>
        <el-form-item label="演唱会时间">
          <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="演唱会地点">
          <el-input v-model="form.location"></el-input>
        </el-form-item>
        <!-- 动态生成座位表单项 -->
        <el-form-item v-for="seat in seats" :key="seat.key" :label="seat.label">
          <el-input v-model="form[seat.key].seat" placeholder="座位数"></el-input>
          <span>个</span>
          <el-input v-model="form[seat.key].price" placeholder="座位价格" prefix="￥"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">{{ isEditing ? '更新' : '添加' }}演唱会</el-button>
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 演唱会列表表格 -->
    <el-card class="box-card">
      <span class="title">演唱会信息列表</span>
      <br><br>
      <!-- 搜索框和增加按钮 -->
      <!-- 列与列之间的间距为20px -->
      <el-row :gutter="20">
        <!-- 搜索框 列宽-->
        <el-col :span="20">
          <el-input
            v-model="searchQuery"
            placeholder="输入歌手名称"
            class="search-input"
            @input="filterConcerts"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="openDialog">增加演唱会</el-button>
        </el-col>
      </el-row>
      <br>
      <!-- 筛选的演唱会 -->
      <el-table :data="filteredConcerts" style="width: 100%" class="my-table" stripe>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="演唱会名称"></el-table-column>
        <el-table-column prop="Singer" label="歌手"></el-table-column>
        <el-table-column prop="time" label="演唱会时间">
          <template slot-scope="scope">
            {{ formatDate(scope.row.time) }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="演唱会地点"></el-table-column>
        <!-- 动态生成座位表格列 -->
        <el-table-column v-for="seat in seats" :key="seat.key" :label="seat.label">
          <template slot-scope="scope">
            <span>{{ scope.row[seat.key].seat }}</span><span>个</span><br>
            <span>￥{{ scope.row[seat.key].price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editConcert(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,//表单显示
      isEditing: false,//是否编辑状态
      originalForm: null,//存储在编辑演唱会信息时的原始表单数据
      concerts: [
        { id: 1, name: '2024世界巡回演唱会', Singer: 'Taylor Swift', time: '2024-07-15 19:00', location: '纽约', A: { seat: 100, price: 1000 }, B: { seat: 200, price: 800 }, C: { seat: 300, price: 600 }, D: { seat: 400, price: 400 }, E: { seat: 500, price: 200 }, F: { seat: 600, price: 100 } },
        { id: 2, name: '星空音乐节', Singer: 'Ed Sheeran', time: '2024-08-20 18:30', location: '伦敦', A: { seat: 150, price: 1200 }, B: { seat: 250, price: 1000 }, C: { seat: 350, price: 800 }, D: { seat: 450, price: 600 }, E: { seat: 550, price: 400 }, F: { seat: 650, price: 200 } },
        { id: 3, name: '梦想之夜音乐会', Singer: 'Adele', time: '2024-09-10 20:00', location: '洛杉矶', A: { seat: 200, price: 1500 }, B: { seat: 300, price: 1200 }, C: { seat: 400, price: 1000 }, D: { seat: 500, price: 800 }, E: { seat: 600, price: 600 }, F: { seat: 700, price: 400 } },
        { id: 4, name: '摇滚传奇之夜', Singer: 'Queen', time: '2024-10-05 21:00', location: '伦敦', A: { seat: 100, price: 1800 }, B: { seat: 200, price: 1500 }, C: { seat: 300, price: 1200 }, D: { seat: 400, price: 1000 }, E: { seat: 500, price: 800 }, F: { seat: 600, price: 600 } },
        { id: 5, name: '流行天后演唱会', Singer: 'BeyoncéKnowles', time: '2024-11-15 20:30', location: '伦敦', A: { seat: 120, price: 1500 }, B: { seat: 220, price: 1200 }, C: { seat: 320, price: 1000 }, D: { seat: 420, price: 800 }, E: { seat: 520, price: 600 }, F: { seat: 620, price: 400 } },
        { id: 6, name: '精彩时刻音乐会', Singer: 'Lady Gaga', time: '2024-12-20 19:30', location: '洛杉矶', A: { seat: 180, price: 1400 }, B: { seat: 280, price: 1100 }, C: { seat: 380, price: 900 }, D: { seat: 480, price: 700 }, E: { seat: 580, price: 500 }, F: { seat: 680, price: 300 } },
        { id: 7, name: '燃烧夏日音乐节', Singer: 'Bruno Mars', time: '2025-01-25 20:00', location: '巴黎', A: { seat: 130, price: 1600 }, B: { seat: 230, price: 1300 }, C: { seat: 330, price: 1100 }, D: { seat: 430, price: 900 }, E: { seat: 530, price: 700 }, F: { seat: 630, price: 500 } },
        { id: 8, name: '激情之夜音乐节', Singer: 'Justin Timberlake', time: '2025-02-20 21:00', location: '纽约', A: { seat: 170, price: 1700 }, B: { seat: 270, price: 1400 }, C: { seat: 370, price: 1200 }, D: { seat: 470, price: 1000 }, E: { seat: 570, price: 800 }, F: { seat: 670, price: 600 } },
        { id: 9, name: '狂野之夜演唱会', Singer: 'Rihanna', time: '2025-03-15 20:30', location: '洛杉矶', A: { seat: 190, price: 1800 }, B: { seat: 290, price: 1500 }, C: { seat: 390, price: 1300 }, D: { seat: 490, price: 1100 }, E: { seat: 590, price: 900 }, F: { seat: 690, price: 700 } },
        { id: 10, name: '梦幻之夜音乐会', Singer: 'Katy Perry', time: '2025-04-10 19:30', location: '洛杉矶', A: { seat: 140, price: 1300 }, B: { seat: 240, price: 1100 }, C: { seat: 340, price: 900 }, D: { seat: 440, price: 700 }, E: { seat: 540, price: 500 }, F: { seat: 640, price: 300 } },
        { id: 11, name: '动感之夜音乐节', Singer: 'Shakira', time: '2025-05-20 20:00', location: '巴黎', A: { seat: 150, price: 1500 }, B: { seat: 250, price: 1200 }, C: { seat: 350, price: 1000 }, D: { seat: 450, price: 800 }, E: { seat: 550, price: 600 }, F: { seat: 650, price: 400 } },
        { id: 12, name: '灵魂之夜演唱会', Singer: 'Alicia Keys', time: '2025-06-15 19:30', location: '纽约', A: { seat: 160, price: 1600 }, B: { seat: 260, price: 1300 }, C: { seat: 360, price: 1100 }, D: { seat: 460, price: 900 }, E: { seat: 560, price: 700 }, F: { seat: 660, price: 500 } },
        { id: 13, name: '激情之夜音乐会', Singer: 'Usher', time: '2025-07-10 20:00', location: '洛杉矶', A: { seat: 200, price: 1700 }, B: { seat: 300, price: 1400 }, C: { seat: 400, price: 1200 }, D: { seat: 500, price: 1000 }, E: { seat: 600, price: 800 }, F: { seat: 700, price: 600 } },
        { id: 14, name: '摇滚之夜音乐节', Singer: 'Mick Jagger', time: '2025-08-20 21:00', location: '伦敦', A: { seat: 180, price: 1800 }, B: { seat: 280, price: 1500 }, C: { seat: 380, price: 1300 }, D: { seat: 480, price: 1100 }, E: { seat: 580, price: 900 }, F: { seat: 680, price: 700 } },
        { id: 15, name: '浪漫之夜音乐会', Singer: 'John Legend', time: '2025-09-15 20:00', location: '纽约', A: { seat: 190, price: 1600 }, B: { seat: 290, price: 1300 }, C: { seat: 390, price: 1100 }, D: { seat: 490, price: 900 }, E: { seat: 590, price: 700 }, F: { seat: 690, price: 500 } },
        { id: 17, name: '精彩时刻音乐会', Singer: 'Lady Gaga', time: '2025-11-05 20:00', location: '伦敦', A: { seat: 170, price: 1500 }, B: { seat: 270, price: 1200 }, C: { seat: 370, price: 1000 }, D: { seat: 470, price: 800 }, E: { seat: 570, price: 600 }, F: { seat: 670, price: 400 } },
        { id: 18, name: '冬季之夜音乐节', Singer: 'Sam Smith', time: '2025-12-10 21:00', location: '纽约', A: { seat: 180, price: 1600 }, B: { seat: 280, price: 1300 }, C: { seat: 380, price: 1100 }, D: { seat: 480, price: 900 }, E: { seat: 580, price: 700 }, F: { seat: 680, price: 500 } },
        { id: 19, name: '欢乐之夜音乐会', Singer: 'Bruno Mars', time: '2026-01-15 20:00', location: '洛杉矶', A: { seat: 190, price: 1700 }, B: { seat: 290, price: 1400 }, C: { seat: 390, price: 1200 }, D: { seat: 490, price: 1000 }, E: { seat: 590, price: 800 }, F: { seat: 690, price: 600 } },
        { id: 20, name: '经典之夜音乐节', Singer: 'Elton John', time: '2026-02-10 19:30', location: '伦敦', A: { seat: 200, price: 1800 }, B: { seat: 300, price: 1500 }, C: { seat: 400, price: 1300 }, D: { seat: 500, price: 1100 }, E: { seat: 600, price: 900 }, F: { seat: 700, price: 700 } }
      ],
      filteredConcerts: [],//筛选后的演唱会
      searchQuery: '',//存储用户在搜索框中输入的歌手名称
      form: {
        id: null,
        name: '',
        Singer: '',
        time: '',
        location: '',
        A: { seat: '', price: '' },
        B: { seat: '', price: '' },
        C: { seat: '', price: '' },
        D: { seat: '', price: '' },
        E: { seat: '', price: '' },
        F: { seat: '', price: '' }
      },
      seats: [
        { label: 'A', key: 'A' },
        { label: 'B', key: 'B' },
        { label: 'C', key: 'C' },
        { label: 'D', key: 'D' },
        { label: 'E', key: 'E' },
        { label: 'F', key: 'F' }
      ]
    };
  },
  created() {
    //刚开始显示的演唱会信息列表与初始的演唱会信息列表相同
    this.filteredConcerts = this.concerts;
  },
  methods: {
    // 打开表单对话框并重置表单数据
    openDialog() {
      this.resetForm();
      this.dialogVisible = true;
    },
    // 取消表单操作并恢复原始表单数据
    closeDialog() {
      this.restoreForm();
      this.dialogVisible = false;
    },
    submitForm() {
      if (this.isEditing) {
        const index = this.concerts.findIndex(concert => concert.id === this.form.id);// 查找当前编辑的演唱会在列表中的索引
        if (index !== -1) {
          this.$set(this.concerts, index, { ...this.form });//更新演唱会信息
        }
      } else {// 如果不是编辑状态，即添加新的演唱会
        if (this.concerts.some(concert => concert.id === this.form.id)) { // 检查演唱会 ID 是否已存在
          this.$message.error('ID已存在，请选择另一个ID');
          return;
        }
        this.concerts.push({ ...this.form });// 将新的演唱会信息添加到列表中
      }
      this.updateLocalStorage();// 更新本地存储中的演唱会列表
      this.filterConcerts();// 过滤显示的演唱会列表
      this.dialogVisible = false;// 关闭表单对话框
      this.resetForm();// 重置表单数据
    },
    // 编辑演唱会信息
    editConcert(concert) {
      this.form = { ...concert }; // 将当前演唱会信息复制到表单数据中
      this.originalForm = { ...concert }; // 备份原始演唱会信息
      this.isEditing = true; // 设置为编辑状态
      this.dialogVisible = true; // 显示表单对话框
    },

    // 删除演唱会信息
    handleDelete(id) {
      this.concerts = this.concerts.filter(concert => concert.id !== id); // 从列表中删除指定 ID 的演唱会信息
      this.updateIds(); // 更新演唱会列表的 ID
      this.updateLocalStorage(); // 更新本地存储中的演唱会列表
      this.filterConcerts(); // 过滤显示的演唱会列表
    },

    // 取消表单操作并恢复原始表单数据
    cancelForm() {
      this.restoreForm(); // 恢复原始表单数据
      this.dialogVisible = false; // 关闭表单对话框
    },
    //重置表单
    resetForm() {
      this.form = {
        id: null,
        name: '',
        Singer: '',
        time: '',
        location: '',
        A: { seat: '', price: '' },
        B: { seat: '', price: '' },
        C: { seat: '', price: '' },
        D: { seat: '', price: '' },
        E: { seat: '', price: '' },
        F: { seat: '', price: '' }
      };
      this.isEditing = false;
    },
    restoreForm() {
      if (this.originalForm) {
        this.form = { ...this.originalForm };
      }
      this.originalForm = null;
    },
    updateIds() {
      this.concerts.forEach((concert, index) => {
        concert.id = index + 1;
      });
    },
    updateLocalStorage() {
      localStorage.setItem('concerts', JSON.stringify(this.concerts));
    },
    formatDate(value) {
      if (!value) return '';
      const date = new Date(value);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    //动态筛选
    filterConcerts() {
      //转换为小写 是否包含
      this.filteredConcerts = this.concerts.filter(concert => 
        concert.Singer.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

<style scoped>
.Live-view {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.el-card {
  max-width: auto;
}
.title {
  margin-bottom: 20px;/*设置底部边距*/
  font-size: 15px;
  border-bottom: 1px solid #e0e0e0;/*底部边框*/
  padding-bottom: 10px;/*底部内边距*/
  font-weight: bold; 
}
.search-input {
  width: 100%;
}
.my-table {
  margin-top: 20px;/*外边距*/
}
</style>


